<template>
  <footer>
<div class="list">
        <div @click="listClick(index)" :class="{iconfont:true,[item.icon]:true, active:ssIndex== index}" v-for="(item,index) in footlist" :key="index"><span class="iconfont"></span><p>{{item.name}}</p></div>
</div>
  </footer>
</template>

<script>
export default {
    data(){
        return{
            ssIndex:0,
            footlist:[
                {icon:'icon-home',name:'首页'},
                {icon:'icon-xitongrizhi',name:'爆爆团'},
                {icon:'icon-zhuantiguanli',name:'订单'},
                {icon:'icon-yonghu',name:'我的'},
            ],
        }
    },
    methods:{
        listClick(index){
            return (this.ssIndex = index)
        }
    }
}
</script>

<style scoped>
footer{
    position: fixed;
    height: 11vh;
    width: 100vw;
    bottom: 0;
    background-color: rgb(255, 255, 255);
    border-top: gainsboro 1px solid;
}
.iconfont{
    font-size: 30px;
}
p{font-size: 18px;}
.list{
    height: 11vh;
    display: flex;
    justify-content: space-around;
    text-align: center;
    align-items: center;
}
.list .active{
    color: rgb(0, 183, 255);
}
</style>